<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <!-- include jQuery + carouFredSel plugin -->
        <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="/js/carousel/jquery.carouFredSel-6.1.0-packed.js"></script>
        <link href="/css/carousel/carouFredSel.css" rel="stylesheet" type="text/css"/>

        <script type='text/javascript' src='/js/menu/jquery.hoverIntent.minified.js'></script>
        <script type='text/javascript' src='/js/menu/jquery.dcmegamenu.1.3.3.js'></script>
        <link href="/css/multizoom/multizoom.css" rel="stylesheet" type="text/css" />
        <link href="/css/menu/black.css" rel="stylesheet" type="text/css" />		
        <link href="/css/css.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="/js/multizoom/multizoom.js">
            // Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
            // Multi-Zoom code (c)2012 John Davenport Scheuer
            // as first seen in http://www.dynamicdrive.com/forums/
            // username: jscheuer1 - This Notice Must Remain for Legal Use
            // Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
        </script>
        <script>
        var loadResourceFile = document.createElement('script');
		loadResourceFile.setAttribute("type", "text/javascript");
		loadResourceFile.setAttribute("src", 'resources/load.resource.js');
        document.getElementsByTagName("head")[0].appendChild(loadResourceFile);
        
            jQuery(document).ready(function($) {

                $('#foo').carouFredSel({
                    circular: false,
                    infinite: false,
                    auto    : false,
                    prev    : {	
                        button	: '#foo_prev',
                        key	: 'left'
                    },
                    next    : { 
                        button	: '#foo_next',
                        key	: 'right'
                    },
                    pagination: '#foo_pag'
                });
            });
               
           jQuery(document).ready(function($){
                $('#mega-menu-2').dcMegaMenu({
                    rowItems: '4',
                    speed: 'fast',
                    effect: 'slide'
                });	
            });
            
            jQuery(document).ready(function($){
                $('#image').addimagezoom({
                    magnifiersize: [300,300]});
            });
            function slideFocus(_img){
			
                var d = _img.parentNode.parentNode.parentNode;
                var d1 = d.getElementsByTagName('div')[0].getElementsByTagName('img')[0];                
                d1.src = _img.src;
                d1.removeAttribute("style");
                /*var m = document.getElementsByClassName('featuredimagezoomerhidden magnifyarea')[0].getElementsByTagName('img')[0];
                m.src=_img.src;*/
                (function($){
                $('#image').addimagezoom({
                    magnifiersize: [300,300]});
					
				})(jQuery);
            }
            
            function addFocusEven(pagination){
                var images = pagination.getElementsByTagName('img');
                for(var i = 0 ; i < images.length; i++){
                    var image = images[i];
                    image.setAttribute('onclick', 'slideFocus(this)');
                }
            }
        </script>


        <style>

        </style>




        <style>
            .images_slide{
                box-shadow: 0 0 5px #000000;
                width: 300px;
                margin:0 20px;
                float:left;

            }
            .images_slide .images_contenner{
                height: 400px;
                width: 300px;
                display:table-cell; 
                vertical-align:middle;
                text-align: center;
                border-bottom: 4px solid #d0d0d0
            }
            .images_slide .images_contenner .image{
                max-height: 400px;
                max-width: 300px;                
            }            

            .images_slide footer{
                position: relative;
                margin: 4px 0;
                width: 300px;
                overflow: hidden;
                height: 88px;
            }
            .images_slide footer .image_pagination{
                position: absolute;
                left: 0;
                top: 0;
                height: 84px;
                width: 900px;
                padding: 2px;
            }
            .images_slide footer .image_pagination img{
                height: 80px;
                margin: 0 1px;
                width: 54px;
                cursor:pointer;
            }

            .images_slide footer .image_pagination img:hover{
                box-shadow: 0px 0px 2px #000;                
            }

            .description{
                border: 1px solid #D0D0D0;
                height: 300px;
                padding: 20px;
            }
        </style>


        <script>
//            function slideFocus(_img){
//                var d = _img.parentNode.parentNode.parentNode;
//                var d1 = d.getElementsByTagName('div')[0];
//                d1.getElementsByTagName('img')[0].src = _img.src;
//            }
//            
//            function addFocusEven(pagination){
//                var images = pagination.getElementsByTagName('img');
//                for(var i = 0 ; i < images.length; i++){
//                    var image = images[i];
//                    image.setAttribute('onclick', 'slideFocus(this)');
//                }
//            }
        </script>


    </head>
    <body>
        <header style="height:100px; ">

        </header>


        <div class="black">  
            <ul id="mega-menu-2" class="mega-menu">
                <li><a href="home.html">Home</a></li>
                <li><a href="test.html">Products</a>
                    <ul>
                        <li><a href="#">Mobile Phones &#038; Accessories</a>
                            <ul>
                                <li><a href="#">Product 1</a></li>
                                <li><a href="#">Product 2</a></li>
                                <li><a href="#">Product 3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Desktop</a>
                            <ul>
                                <li><a href="#">Product 4</a></li>
                                <li><a href="#">Product 5</a></li>
                                <li><a href="#">Product 6</a></li>
                                <li><a href="#">Product 7</a></li>
                                <li><a href="#">Product 8</a></li>
                                <li><a href="#">Product 9</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Laptop</a>
                            <ul>
                                <li><a href="#">Product 10</a></li>
                                <li><a href="#">Product 11</a></li>
                                <li><a href="#">Product 12</a></li>
                                <li><a href="#">Product 13</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Accessories</a>
                            <ul>
                                <li><a href="#">Product 14</a></li>
                                <li><a href="#">Product 15</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Software</a>
                            <ul>
                                <li><a href="#">Product 16</a></li>
                                <li><a href="#">Product 17</a></li>
                                <li><a href="#">Product 18</a></li>
                                <li><a href="#">Product 19</a></li>
                            </ul>
                        </li>
                        
                    </ul>
                </li>
                <li><a href="#">Sale</a>
                    <ul>
                        <li><a href="#">Special Offers</a>
                            <ul>
                                <li><a href="#">Offer 1</a></li>
                                <li><a href="#">Offer 2</a></li>
                                <li><a href="#">Offer 3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Reduced Price</a>
                            <ul>
                                <li><a href="#">Offer 4</a></li>
                                <li><a href="#">Offer 5</a></li>
                                <li><a href="#">Offer 6</a></li>
                                <li><a href="#">Offer 7</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clearance Items</a>
                            <ul>
                                <li><a href="#">Offer 9</a></li>

                            </ul>
                        </li>
                        <li class="menu-item-129"><a href="#">Ex-Stock</a>
                            <ul>
                                <li><a href="#">Offer 10</a></li>
                                <li><a href="#">Offer 11</a></li>
                                <li><a href="#">Offer 12</a></li>
                                <li><a href="#">Offer 13</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">About Us</a>
                    <ul>
                        <li><a href="#">About Page 1</a></li>
                        <li><a href="#">About Page 2</a></li>

                    </ul>
                </li>
                <li><a href="#">Services</a>
                    <ul>
                        <li><a href="#">Service 1</a>
                            <ul>
                                <li><a href="#">Service Detail A</a></li>
                                <li><a href="#">Service Detail B</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Service 2</a>
                            <ul>
                                <li><a href="#">Service Detail C</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Service 3</a>
                            <ul>
                                <li><a href="#">Service Detail D</a></li>
                                <li><a href="#">Service Detail E</a></li>
                                <li><a href="#">Service Detail F</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Service 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </div>



        <div id="_body">
            <div style="border-bottom: 1px solid #DDDDDD;
                 height: 30px;"></div>
            <div style="clear:both; height:560px">
                <div style="
                     display: table-cell;

                     height: 40px;
                     vertical-align: middle;
                     width: 100%;"> </div>
                <article id="images_slide" class="images_slide">
                    <div class="images_contenner">
                        <img id="image" class="image" src="http://www.vatgia.com/pictures_fullsize/lku1300533839.jpg"/>
                    </div>
                    <footer>
                        <div id="image_pagination" class="image_pagination">
                            <img src="http://www.vatgia.com/pictures_fullsize/lku1300533839.jpg"/>
                            <img src="http://www.vatgia.com/pictures_fullsize/dyq1301283412.jpg"/>
                            <img src="http://www.vatgia.com/pictures_fullsize/xjq1301931051.jpg"/>
                            <img src="http://www.vatgia.com/pictures_fullsize/iaw1304662568.jpg"/>
                            <img src="http://www.vatgia.com/pictures_fullsize/fqu1304663118.jpg"/>
                            <img src="http://www.vatgia.com/pictures_fullsize/fqu1304663118.jpg"/>
                            <img src="http://www.vatgia.com/pictures_fullsize/fqu1304663118.jpg"/>
                        </div>
                        <script>
                            addFocusEven(document.getElementById('image_pagination'));
                        </script>
                    </footer>
                </article>
                <article id="detail" style=" float: right;
                         width: 530px;padding-right:20px">
                    <header style="background: -webkit-gradient(linear, center top, center bottom, from(#EFEFEF), to(white)); background: -moz-linear-gradient(center top , #EFEFEF, #FFFFFF) repeat scroll 0 0 transparent;
                            border-top: 1px solid #E5E5E5;;
                            min-height: 45px;
                            padding: 10px;
                            width:510px">

                        <span style="color: #333333;
                              font-size: 24px;
                              font-weight: bold;
                              padding-left: 10px;
                              text-shadow: 1px 1px 2px #D0D0D0;">Đầm ren tay con duyên dáng MS 122</span>
                    </header>

                    <div class="description">
                        - Đầm được may bằng chất liệu phi bóng nhập khẩu, mềm mại, thoáng mát, mịn màng.
                        <br>
                        - Kiểu dáng thanh lịch, kết hợp kiểu cánh dơi với đầm tôn vẻ sang trọng của bạn gái.
                        <br>
                        - Màu sắc: nhiều màu.
                        <br>
                        - Đầm free size, thích hợp cho các bạn gái từ 55kg trở xuống.
                        <br>
                        - Đầm phi sẽ giúp bạn dịu dàng khi dạo phố, thanh lịch khi đi làm, sang trọng khi đi dự tiệc.
                        <br>
                        - Có thể mua để làm quà tặng ý nghĩa dành cho các bạn gái
                        
                    </div>

                    <footer style="  display: table-cell;
                            padding: 10px;
                            vertical-align: middle;">
                        <span>Giá bán: </span>
                        <span style="color: #FF6600;
                              font-size: 24px;
                              font-weight: bold;
							  text-shadow : 1px 1px 1px #ccc;
                              margin-top: 5px;">410.000đ</span>
                    </footer>
                </article>
            </div>


            <section class="image_carousel">
                <div class="pagination1">
                    dfsdfg 
                </div>
                <div id="foo"  class='foo'>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg" alt="basketball" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>

                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg" alt="beachtree" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg" alt="cupcackes" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg" alt="hangmat" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg" alt="new york" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg" alt="laundry" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg" alt="mom son" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg" alt="picknick" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg" alt="shoes" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg" alt="paris" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg" alt="sunbading" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                    <article>
                        <img src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="180" height="140" />
                        <footer>
                            <div class="title"> Footer content </div>
                            <div class="price"> 2500 VND</div>
                        </footer>
                    </article>
                </div>
                <div class="clearfix"></div>
                <a class="prev" id="foo_prev" href="#"><span>prev</span></a>
                <a class="next" id="foo_next" href="#"><span>next</span></a> 
                <div class="pagination" id="foo_pag"> </div>
            </section>


        </div>
        <footer style="height:100px">
        </footer>
    </body>
</html>
